<template>
  <div class="settingpage">
    <div id="__layout">

      <div class="acSetting">
        <!--      导航区-->
        <div class="logo"  @click="handleToTab('defualt')">
          <img src="https://sxsimg.xiaoyuanzhao.com/static/new_main/img/logo.png?v=ca7e7ee7a9339caf25d8e12d055eb1e8">
          <span>账号设置</span>
        </div>
        <div class="account-nav" >
          <div class="account-nav-item" :class="{active:idx==current}" @click="selectItem(idx)"
               v-for="(nav,idx) in navList" :key="idx">
            <span>{{ nav.title }}</span>
<!--          </div>-->
<!--          <div class="account-nav-item"><span>修改密码</span>-->
<!--          </div>-->
<!--          <div class="account-nav-item"><span>隐藏设置</span>-->
          </div>
        </div>
        <!--      内容区-->
        <div class="account-con">
          <!-- 账号绑定 :class="{active:idx==current}":style="{display:isShow}" -->
          <div class="bind-account " id="content0" style="display:none"  >
            <div class="title">账号绑定</div>
            <div class="current-account">
              <span>当前账号：</span>
              <div>
                <span class="current-phone">+86 15577004807</span>
                <span class="change-phone">更换手机号</span>
              </div>
            </div>
            <div class="bind-box">
              <p>绑定后可以同时使用以下方式登录</p>
              <ul class="bind-list">
                <li data-type="email" class="">
                  <div class="icon"></div>
                  <div class="unbind-con">
                    <span class="bind-btn" style="display: block;">绑定邮箱</span>
                  </div>
                </li>
                <li data-type="qq" class="">
                  <div class="icon"></div><div class="unbind-con">
                  <div class="bind-btn">绑定QQ号</div>
                  </div></li>
                <li data-type="wx" class="">
                  <div class="icon"> </div>
                  <div class="unbind-con"><div class="bind-btn">绑定微信账号</div>
                  </div></li>
                <li data-type="wb" class=""><div class="icon"></div>
                  <div class="unbind-con"><a href="https://www.shixiseng.com/user/sso/weibo/bind?flag=weibo" class="bind-btn">绑定微博账号</a>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <!-- 修改密码-->
          <div class="change-password " id="content1" style="display:none">
            <div class="title">修改密码</div>
            <div class="current-account">
              <p>您现在登录的账号为：&nbsp;&nbsp;<span>15577004807</span>
              </p></div>
            <div class="password-form">
              <form id="modifyform">
                <label for="current-password"><span>当前密码</span>
                  <input type="password" id="current-password" name="oldpass" autocomplete="off">
                </label>
                <label for="new-password"><span>新密码</span>
                  <input type="password" id="new-password" name="newpass" autocomplete="off">
                </label>
                <label for="confirm-password"><span>确认密码</span>
                  <input type="password" id="confirm-password" name="rnewpass" autocomplete="off">
                </label>
                <div class="submit">确认密码</div>
              </form>
            </div>

          </div>
          <!-- 隐藏设置-->
          <div class="change-invite " id="content2" style="display:none">
            <div class="title">隐藏设置</div>
            <div class="current-invite">
              <div class="invite">
                <div class="text">隐藏简历</div>
                <div class="invite-btn">
                  <label class="el-checkbox">
                    <span class="el-checkbox__input">
                      <span class="el-checkbox__inner"></span>
                      <input type="checkbox" aria-hidden="false" class="el-checkbox__original" value="">
                    </span><!---->
                  </label> <span class="label">开启隐藏</span></div></div>
                    <p class="tip">
                    隐藏简历后，您将不会被推荐给HR，除非您主动建立联系，否则HR无法查看您的简历，也无法与您沟通
                  </p></div></div>
        </div>

      </div>



    </div>
  </div>
</template>

<script>
/*eslint-disable */
// 账号设置
export default {
name: 'accountsetting',
  data() {
    return {
      current:0,
      isShow:'none',
      navList: [
        {id:1,title:'账号绑定'},
        {id:2,title:'修改密码'},
        {id:3,title:'隐藏设置'}
      ]
    }
  },
  mounted () {
  this.selectItem()
  },
  methods:{
    // to 个人中心
    handleToTab(routerName) {
      this.$router.push({name:routerName})
    },
    selectItem(idx=0) {
     this.current = idx
      let temp = 'content'+idx
      // console.log('temp: ',temp)
      const arr = ['content0','content1','content2']
      for (let i= 0;i<=arr.length-1;i++){

        let calss = document.getElementById(arr[i])
        if (temp == arr[i]){
          console.log('=: ',arr[i])
          calss.style.display='block'
        }
        else {
          console.log(arr[i])
          calss.style.display='none'
        }
        // console.log('calss: ',calss)
      }
      // this.current.style.display='block'
      // let calss = document.getElementById(tem)

    },
  }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  /*display: block;*/
}
.settingpage {
  background: #f4f4f4;
  height: 100%;
}
/*div {*/
/*  display: block;*/
/*}*/
/*===左边导航区===*/
.acSetting {
  width: 1080px;
  margin: 0 auto;
}
.acSetting .logo {
  margin: 26px 0 20px;
}
.acSetting .logo span {
  display: inline-block;
  font-size: 15px;
  color: #4c91e0;
  margin-left: 14px;
}
.acSetting .account-nav {
  float: left;
  line-height: 26px;
  color: #333;
  font-size: 16px;
  text-align: center;
  background-color: #fff;
  border-radius: 2px;
}
.acSetting .account-nav .active {
  color: #4c91e0;
}
.acSetting .account-nav .account-nav-item {
  padding: 14px 0;
  cursor: pointer;
  border-bottom: 1px solid #f5f5f5;
}
.acSetting .account-nav .account-nav-item span {
  display: block;
  padding: 0 49px;
  border-left: 3px solid transparent;
}

/*===右边内容区===*/
.acSetting .account-con {
  float: right;
  width: 895px;
  background-color: #fff;
  border-radius: 2px;
  font-size: 15px;
}
.acSetting .account-con .title {
  line-height: 54px;
  padding-left: 30px;
  border-bottom: 1px solid #f5f5f5;
  color: #333;
  font-size: 16px;
}
.acSetting .account-con .current-account {
  color: #333;
  line-height: 80px;
  padding-left: 50px;
  border-bottom: 1px solid #f5f5f5;
}
.acSetting .account-con .current-account .change-phone,
.acSetting .account-con .current-account .account-box .account-con .current-account .add-phone {
  color: #4c91e0;
  margin-left: 12px;
  cursor: pointer;
}
.acSetting .account-con .bind-box {
  color: #a6a6a6;
}
.acSetting .account-con .bind-box p {
  padding: 34px 0 0 50px;
}
.acSetting .account-con .bind-box .bind-list {
  padding-left: 50px;
  margin-top: 45px;
}

ul, li {
  list-style: none;
}

.acSetting .account-con .bind-box .bind-list li {
  line-height: 24px;
  margin-bottom: 40px;
  padding-left: 36px;
  position: relative;
  cursor: pointer;
}
.acSetting .account-con .bind-box .bind-list li:first-child .icon {
  background-image: url();
  background-position: -50px -10px;
}
.acSetting .account-con .bind-box .bind-list li .icon {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 2px;
  left: 0;
}
.acSetting .account-con .bind-box .bind-list li span {
  display: inline-block;
}
 /*修改密码*/
.password-form {
  padding: 12px 0 0 50px;
}
form {
  display: block;
  margin-top: 0em;
}
.password-form label {
  display: block;
  margin-top: 23px;
}
.password-form label span {
  display: inline-block;
  width: 60px;
  text-align: right;
  color: #a6a6a6;
}
.password-form label input {
  width: 170px;
  height: 35px;
  padding-left: 10px;
  margin-left: 14px;
  border: 1px solid #f5f5f5;
  color: #333;
}

input {
  width: 100%;
  -webkit-appearance: none;
  background-color: #fff;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  font-size: inherit;
  height: 40px;
  line-height: 40px;
  outline: none;
  padding: 0 15px;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
button, input, optgroup, select {
  font-family: sans-serif;
}

.password-form .submit {
  width: 120px;
  height: 38px;
  line-height: 38px;
  text-align: center;
  color: #fff;
  background-color: #4c91e0;
  border-radius: 2px;
  cursor: pointer;
  margin: 40px 0 43px 80px;
}
/*隐藏设置*/
.current-invite {
  color: #333;
  padding: 27px 46px 50px 46px;
  line-height: 21px;
}
.current-invite .invite {
  display: flex;
  justify-content: space-between;
}
.current-invite .tip {
  margin-top: 14px;
  font-size: 14px;
  font-family: MicrosoftYaHei;
  color: #999999;
  line-height: 19px;
}








</style>
